import React, { PureComponent } from 'react';
import { Spin, Divider } from 'antd';

import accounting from 'accounting';
import StatisticsCard from './statisticsCard';
import style from './styles.less';

export default class TradeStatistics extends PureComponent {
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  formatData(number) {
    return accounting.formatNumber(Number(number), 2);
  }

  render() {
    const { countStat = {}, loading } = this.props;

    return (
      <div>
        <Spin spinning={loading}>
          <div className={style.amountandnumber}>
            <div style={{ display: 'flex' }}>
              <div style={{ width: '33%' }}>
                <StatisticsCard icon={'number'} title='交易笔数' number={countStat.tradeNum || 0} />
              </div>
              <Divider className={style.divider} type='vertical' />
              <div style={{ width: '33%' }}>
                <StatisticsCard icon={'inFlow'} title='流入笔数' number={countStat.buyNum || 0} />
              </div>
              <Divider className={style.divider} type='vertical' />
              <div style={{ width: '33%' }}>
                <StatisticsCard icon={'outFlow'} title='流出笔数' number={countStat.sellNum || 0} />
              </div>
            </div>
            <Divider />
            <div style={{ display: 'flex' }}>
              <div style={{ width: '48%' }}>
                <StatisticsCard icon={'moneyIcon'} title='交易金额:' number={this.formatData(countStat.tradeAmount || 0)} />
              </div>
              <Divider className={style.divider} type='vertical' />
              <div style={{ width: '48%' }}>
                <StatisticsCard icon={'inFlowMoney'} title='流入金额:' number={this.formatData(countStat.buyAmount || 0)} />
              </div>
            </div>
            <Divider />
            <div style={{ display: 'flex' }}>
              <div style={{ width: '48%' }}>
                <StatisticsCard icon={'outFlowMoney'} title='流出金额' number={this.formatData(countStat.sellAmount || 0)} />
              </div>
              <Divider className={style.divider} type='vertical' />
              <div style={{ width: '48%' }}>
                <StatisticsCard icon={'netMoney'} title='净流入金额' number={this.formatData(countStat.netBuyAmount || 0)} />
              </div>
            </div>
          </div>
        </Spin>
      </div>
    );
  }
}
